<template>
  <div class="search_container">
    <!-- 头部 -->
    <div class="searchTop">
      <div class="searchIcon">
        <img src="./images/search_icon.png" alt="" @click="search" />
        <input
          type="text"
          placeholder="200000+ 免费模板任你搜索"
          v-model.trim="searchKey"
          @keyup.enter="search"
        />
        <div class="reset" @click="reset" v-show="searchKey">
          <img src="./images/reset.svg" alt="" />
        </div>
      </div>
      <div class="cancel" @click="goBack">取消</div>
    </div>
    <!-- 小log区域 -->
    <div v-if="switchHotOrModel">
      <!-- 热门搜索栏 -->
      <Key
        :keyList="hotKeyList"
        title="热门搜索"
        v-if="hotKeyList.length"
        @searchByKey="searchByKey"
      />
      <!-- 搜索历史 -->
      <Key
        :keyList="searchHistory"
        title="搜索历史"
        v-if="searchHistory.length"
        :clearable="true"
        @clear="clear"
        @searchByKey="searchByKey"
      />
    </div>
    <!-- 点击搜索 切换组件 -->
    <Model v-if="!switchHotOrModel" :searchKey="searchKey" ref="model" />
  </div>
</template>

<script>
import Key from "./key.vue";
import Model from "./Model.vue";
export default {
  name: "Search",
  props: [],
  data() {
    return {
      searchKey: "",
      hotKeyList: [],
      searchHistory: [],
      // 控制模型页面和热门搜索组件的切换
      switchHotOrModel: true,
    };
  },
  created() {
    //判断是否为详情页点击关键字key进来的
    if (this.$route.query.key) {
      this.searchByKey(this.$route.query.key);
    }
    this.getHotKey();
    this.getHistory();
  },
  components: { Key, Model },
  methods: {
    //点击取消上一页
    goBack() {
      this.$router.go(-1);
    },
    //获取热门搜索数据
    async getHotKey() {
      const res = await this.$API.get(
        "/vv/template/getRecommendKeyword.do?_dataType=json"
      );
      if (res.status !== 200) return this.$toast.fail("获取热门搜索失败");
      this.hotKeyList = res.data.body.data;
    },
    //从本地中获取搜索历史
    getHistory() {
      this.searchHistory = JSON.parse(localStorage.getItem("SH_Key")) || [];
    },
    //搜索历史存放
    setHistory() {
      const index = this.searchHistory.findIndex(
        (item) => item.keyword == this.searchKey
      );
      if (index !== -1) {
        this.searchHistory.splice(index, 1);
      }
      this.searchHistory.unshift({ keyword: this.searchKey });
      localStorage.setItem("SH_Key", JSON.stringify(this.searchHistory));
    },
    //通过搜索框输入关键字搜索,点击回车，搜索图标
    search() {
      if (!this.searchKey) return;
      //当已经展示model组件时再次点击，不重新渲染组件，所以不会调用model中的created生命周期，就不会更新数据
      if (!this.switchHotOrModel) {
        //虽然model组件展示，点击回车，搜索图标时判断搜索关键字是否改变，不变则不进行查找，变则进行下面
        if (this.searchKey !== this.searchHistory[0].keyword) {
          //此时可以直接获得组件实例，调用组件的方法改变数据，改变前，让原数据置空，title是一次请求都能用
          this.$refs.model.pageno = 0;
          this.$refs.model.picList = [];
          this.$refs.model.getData();
        } else {
          return;
        }
      }
      //存到本地
      this.setHistory();
      // 切换model组件
      this.switchHotOrModel = false;
    },
    //点击搜索框下面的热门搜索，搜索历史字搜索
    searchByKey(kw) {
      this.searchKey = kw;
      this.setHistory();
      this.switchHotOrModel = false;
    },
    //点击输入框里面的x，清空搜索框，
    reset() {
      this.searchKey = "";
      this.switchHotOrModel = true;
    },
    //清空历史记录
    clear() {
      this.searchHistory = [];
      localStorage.removeItem("SH_Key");
    },
  },
};
</script>

<style lang="less" scoped>
.search_container {
  padding-top: 44px;
  .searchTop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background-color: #fff;
    .searchIcon {
      position: relative;
      flex: 1;
      height: 34px;
      line-height: 34px;
      background-color: #f8f8fb;
      border-radius: 17px;
      padding: 0 17px;
      box-sizing: border-box;
      img {
        margin-top: 8px;
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      input {
        background-color: #f8f8fb;
        margin-top: -5px;
        vertical-align: middle;
        color: #777;
        outline: none;
        border: 0;
        text-align: inherit;
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
      }
      .reset {
        position: absolute;
        top: 3px;
        right: 10px;
        width: 14px;
        height: 14px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .cancel {
      padding-left: 15px;
      width: 50px;
      font-size: 12px;
    }
  }
}
</style>